<template>
    <div class="control-container">
    <!-- <panel-head :info="route" /> -->
    <div class="card">
        <div class="user">
            <el-card class="user-card">
            <template #header>
                <div class="card-header">
                <el-image :src="user.user_img" />
                <span>{{ user.user_name }}</span>
                </div>
            </template>
            <div class="user-info">
                <div>当前权限：{{ user.permission }}</div>
                <div>登录的ip：{{ user.ip }}</div>
            </div>
            </el-card>
        </div>
        <el-card class="serive-list">
            <div class="serive-item" v-for="(item, index) in types" :key="index">
            <div class="img-box" :style="{ 'background-color': color[index] }">
                <img :src="imgs[index]" alt="" />
            </div>
            <div class="text">
                <div class="num">{{ item.num }}</div>
                <div class="name">{{ item.state }}</div>
            </div>
            </div>
        </el-card>
    </div>

    <div class="content">
        <div ref="chartContainer" style="width: 1200px; height: 800px;"></div>
      <!-- <div class="echart" ref="echart"></div> -->
    </div>
  </div>



    <!-- dashboard -->
    <!-- <div id="main" style="width: 600px;height:400px;" ref="echart"></div> -->
    
</template>
<script setup>
    import * as echarts from "echarts";
    import { ref, onMounted, reactive } from "vue";
    import {getHomePageData} from "../../api/index"
    

    const chartContainer = ref(null);
    let myChart = null;
    const types = ref([])
    const chartList = ref([])
    const imgs = ["dzf.png", "dfw.png", "ywc.png", "yqx.png"];
    const color = ["#F05050", "#7266BA", "#23B7E5", "#27C24C"];
    let user = ref({
        ip:'',
        permission:'',
        user_img:'',
        user_name:''
    })
    // const route = {
    //     title: "首页",
    //     path: "/dashboard"
    // }
    // const user = {
    //     user_img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    // }

    onMounted(() => {
        // Create the echarts instance
        var myChart = echarts.init(chartContainer.value);

        // Draw the chart
        // const option = 
        types.value = [{state: "待支付", num: 6}, {state: "待服务", num: 2}, {state: "已完成", num: 11}, {state: "已取消", num: 3}]
        chartList.value = [
            {date: '2024-07-20', order_sum: 5, order_money: 2.5},
            {date: '2024-07-21', order_sum: 10, order_money: 5},
            {date: '2024-07-22', order_sum: 6, order_money: 3},
            {date: '2024-07-23', order_sum: 4, order_money: 2},
            {date: '2024-07-24', order_sum: 6, order_money: 3},
            {date: '2024-07-25', order_sum: 4, order_money: 2},
            {date: '2024-07-26', order_sum: 8, order_money: 4}
        ]

        const option = {
            title: {
                // text: '订单数量与金额趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false
                }
            },
            legend: {
                data: ['订单金额', '订单数量'],
                left: 10
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            axisPointer: {
                link: [{ xAxisIndex: 'all' }]
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 30,
                    end: 70,
                    xAxisIndex: [0, 1]
                }
            ],
            grid: [
                {
                    left: 120,
                    right: 50,
                    height: '35%'
                },
                {
                    left: 120,
                    right: 50,
                    //   
                    top: '60%',
                    height: '35%'
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { onZero: true },
                    data: chartList.value.map(item => item.date),
                    axisLabel: {
                        formatter: (value) => {
                            // 如果你的日期包含时间，可以使用：
                            // return echarts.time.format(value, '{yyyy}-{MM}-{dd} {HH}:{mm}', false);
                            return value // 直接显示日期
                        }
                    }
                },
                {
                    gridIndex: 1,
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { onZero: true },
                    //   data: chartList.value.map(item => item.date),
                    position: 'top'
                }
            ],
            yAxis: [
                {
                    name: '订单金额（元）',
                    type: 'value',
                    nameTextStyle: {
                        padding: [0, 0, 0, -120]
                    },
                    namelocation: 'start',
                    nameGap: 20,
                    nameRotate: 10,

                    min: 0,
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    gridIndex: 1,
                    name: '订单数量（单）',
                    type: 'value',
                    nameTextStyle: {
                        padding: [0, 0, 0, -120]
                    },
                    namelocation: 'start',
                    nameGap: 20,
                    nameRotate: 10,
                    inverse: false,  // 根据实际需求调整是否反向坐标轴
                    min: 0,
                    axisLabel: {
                        formatter: '{value} 单'
                    }
                }
            ],
            series: [
                {
                    name: '订单金额',
                    type: 'line',
                    symbolSize: 8,
                    data: chartList.value.map(item => item.order_money),
                    lineStyle: {
                        color: '#5470C6'
                    },
                    itemStyle: {
                        color: '#5470C6'
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' }, // 最大值标记
                            { type: 'min', name: 'Min' }  // 最小值标记
                        ],
                        symbol: 'pin',       // 形状 (circle/pin/rect等)
                        symbolSize: 30,         // 尺寸 (默认20，改小即可)
                        itemStyle: {
                        // color: '#FF0000',     // 填充色
                        // borderColor: '#FFF',  // 边框色
                        // borderWidth: 2        // 边框粗细
                        }
                    }
                },
                {
                    name: '订单数量',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    symbolSize: 8,
                    data: chartList.value.map(item => item.order_sum),
                    lineStyle: {
                        color: '#EE6666',
                        type: 'dashed'
                    },
                    itemStyle: {
                        color: '#EE6666'
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' }, // 最大值标记
                            { type: 'min', name: 'Min' }  // 最小值标记
                        ],
                        symbol: 'pin',       // 形状 (circle/pin/rect等)
                        symbolSize: 30,         // 尺寸 (默认20，改小即可)
                    }
                }
            ]
        };

        myChart.setOption(option)




        // 获取数据
        getHomePageData().then(({data}) =>{
            user.value = data.data.user
            console.log(user.value);
            
            
        })
        // const getData = async () => {
        // let res = await getHomePageData();
        // console.log(res, 'res')
        // user = res?.data?.data;
        // // if (data) {
        // //     user.value = data.user;
        // //     // types.value = data.types;
        // //     types.value = [{state: "待支付", num: 6}, {state: "待服务", num: 2}, {state: "已完成", num: 11}, {state: "已取消", num: 3}]
        // //     // typeList.value = data.typeList;
        // //     typeList.value = [
        // //     {date: '2024-07-26', order_sum: 5, order_money: 2.5},
        // //     {date: '2024-07-26', order_sum: 10, order_money: 5},
        // //     {date: '2024-07-26', order_sum: 6, order_money: 3},
        // //     {date: '2024-07-26', order_sum: 4, order_money: 2},
        // //     {date: '2024-07-26', order_sum: 8, order_money: 4}
        // //     ]
        // //     initEchart();
        // // }
        // };

        // getData();

    })
    

</script>
<style lang="less" scoped>
.card {
    display: flex;
}

.user {
    margin: 20px 0;
    width: 45%;

    .user-card {
        .card-header {
            display: flex;

            .el-image {
                width: 120px;
                height: 120px;
                border-radius: 50%;
                margin: 5px;
            }

            span {
                line-height: 120px;
                font-size: 28px;
                font-weight: bold;
            }
        }

        .user-info {
            color: #666;
            line-height: 30px;
        }
    }
}

.serive-list {
    background-color: #fff;
    margin: 20px;
    height: 269px;
    width: 50%;
    margin-bottom: 40px;

    ::v-deep(.el-card__body) {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: center;

        height: 95%;

        .serive-item {
            width: 50%;
            height: 50%;
            display: flex;
            justify-content: center;

            .img-box {
                width: 70px;
                height: 70px;
                text-align: center;
                margin-right: 10px;
                border-radius: 5px;

                img {
                    margin: 5px;
                    width: 60px;
                    height: 60px;
                    border-radius: 5px;
                }
            }

            .num {
                font-size: 25px;
                line-height: 40px;
                font-weight: bold;
            }

            .name {
                font-size: 14px;
            }
        }
    }
}

.content {
    padding: 10px;
    background-color: #fff;
    width: 95%;

    display: flex;
    justify-content: center;
}
</style>